{% extends "base.html" %} {% block head %} {{ super() }}

<script	src="{{url_for('static', filename='../static/js/zmultipages.js')}}"
	type="text/javascript" charset="utf-8"></script>
	
<script src="{{url_for('static', filename='../static/js/zui.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script
	src="{{url_for('static', filename='../static/js/Wizard.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function(){
		$('div.left-side-content').hide();
		$('div.right-side-bar').hide();
		
		var wizard = new Wizard({form_id:'signup-booking-form',
									height:300,
									validationUrl:"/validate_signup"
									});
		var $AdultSelect = $('#signup-booking-form').find('select[name="n-adult-tickets"]');
		var $SeniorSelect = $('#signup-booking-form').find('select[name="n-senior-tickets"]');
		var $ChildSelect = $('#signup-booking-form').find('select[name="n-child-tickets"]');
		for( var i=0; i<=10; i++ ){
			$AdultSelect.append('<option value="'+ i +'">'+ i +'</option>');
			$SeniorSelect.append('<option value="'+ i +'">'+ i +'</option>');
			$ChildSelect.append('<option value="'+ i +'">'+ i +'</option>');
		}
	});
</script>
{% endblock %} {% block jumbotron %}
<div class="jumbotron">
	<div class="container">
		<h1>{{'London Spring Gala'}}</h1>
		<p>{{"It's time to book your tickets now!"}}</p>
		<h6><div>Adult	 $25, Senior (65 +) $5, Child (4-14) $10 each</div>
		</h6>
		<p>
			<a href="/signup" class="btn btn-lg btn-primary">{{'Sign Up'}}</a>
		</p>
	</div>
</div>
{% endblock %} {% block content %}
<div class="container">


	<form id="signup-booking-form" enctype="multipart/form-data" action="/signup_and_booking" method="post">

		<div class="z-page" value="0">

			<h3>Step 1: Sign up to SpringGala</h3>
			<!-- Username -->
			<div class="row form-group" name="username">
				<div class="col-md-3">
					<input class="form-control z-input" type="text" placeholder="Name" />
				</div>
				<div class="col-md-3 z-label">Your name*</div>
			</div>
	
			<!-- Password -->
			<div class="row form-group" name="password">
				<div class="col-md-3">
					<input class="form-control z-input" type="password"
						placeholder="Password" />
				</div>
				<div class="col-md-3 z-label">6 characters or more*</div>
			</div>
	
			<!-- Email -->
			<div class="row form-group" name="email">
				<div class="col-md-3">
					<input class="form-control z-input" type="text" placeholder="Email" />
				</div>
				<div class="col-md-3 z-label">Your email*</div>
			</div>
	
			<!-- Phone -->
			<div class="row form-group" name="phone">
				<div class="col-md-3">
					<input class="form-control z-input" type="text" placeholder="Phone number" />
				</div>
				<div class="col-md-3 z-label">Your phone number</div>
			</div>
	
			<!-- Pay method
			<div class="row form-group" name="pay-method">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">Off line</option>
						<option value="1">Paypal</option>
					</select>
				</div>
				<div class="col-md-3"></div>
			</div> -->
		
			<div class="row form-group" name="agreement">
				<div class="col-md-3">
					<div class="col-md-1">
						<input class="checkbox z-input" type="checkbox" name="agreement"/>
					</div>
					<div class="col-md-10 z-label">I Agree the following terms</div>
				</div>
			</div>
			<br/>
		</div><!-- end of page 0 -->
	
		<div class="z-page" value="1">
			<h3>Step 2: Book SpringGala ticket</h3>
			<div>*Please do not leave your credit card information in the message, we will contact you through email or phone.</div>
			<!-- Ticket -->
			<div class="row form-group" name="n-adult-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
					</select>
				</div>
				<div class="col-md-3 z-label">Number of Adults, $25 each</div>
			</div>
			
			<!-- Ticket -->
			<div class="row form-group" name="n-senior-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
					</select>
				</div>
				<div class="col-md-3 z-label">Number of Senior (65+), $5 each</div>
			</div>
			
			<!-- Ticket -->
			<div class="row form-group" name="n-child-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
					</select>
				</div>
				<div class="col-md-3 z-label">Number of Child (4-14), $10 each</div>
			</div>
			
			
			<!-- Message -->
			<div class="row form-group" name="message" >
				<div class="col-md-3">
					<textarea class="form-control z-input" rows="5"
						placeholder="Messages"></textarea>
				</div>
	
				<div class="col-md-4 z-label">Special needs can be left here.</div>
			</div>
	
		</div><!-- end of page 1 -->
		
		
		<div class="row col-md-12">
			<div class="col-md-7 z-btn-area pull-left">
				<button type="button"
					class="z-prev-btn cancel btn btn-primary col-md-2">Previous</button>
				<button type="button"
					class="z-next-btn cancel btn btn-primary col-md-2">Next</button>
				<button type="submit"
					class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
			</div>
			<div class="col-md-5"></div>
		</div>
	</form>


</div><!-- end of container -->

{% endblock %}
